<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
  </div>

  <button class="add">添加节点</button>
  <button class="del">删除节点</button>

  <script>
    const div = document.querySelector('div')

    // 父节点
    // console.log(div.parentNode)

    // 子节点
    // console.log(div.children)

    const add = document.querySelector('.add')
    const del = document.querySelector('.del')

    let aBox = document.createElement('a')

    aBox.innerHTML = '跳转百度'
    aBox.href = 'http://www.baidu.com'

    add.addEventListener('click', function () {
      // 结尾添加节点
      // div.append(pBox)
      div.prepend(aBox)
    })

    del.addEventListener('click', function () {
      // 删除节点
      // div.remove()

      //每隔1秒删除一个节点
      setInterval(() => {
        div.removeChild(div.children[0])
      }, 1000)
    })

  </script>
</body>

</html>